<template>
	<view>
		<shop-file-picker style="width: 100%;" :value="fileList" limit="9" :file-extname="file_extname"
			mode="grid" ref="files" @select="select" @delete="del" :image-styles="imageStyles" :auto-upload="false"
			  @fail="fail">
			<image :src="$IMG_URL+'16557826807714447598.png'" mode="widthFix" style="width: 214rpx;height: 214rpx;">
			</image>
		</shop-file-picker>
		<u-overlay :show="show" @click="show = false" class="u-flex u-row-center u-col-center">
			<view >
				<u-loading-icon size="30" :textSize="15" text="上传中" textColor="white" :vertical="true" color="white"></u-loading-icon>
			</view>
			
		</u-overlay>
			
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			maxCount: {
				type: Number,
				default: 1,
				num:9
			},

			file_extname: {
				type: String,
				default: 'jpg,jpeg,png'
			},
			fileList: {
				type: Array
			}
		},
		
		data() {
			return {
			  imageStyles: {
					width: 115,
					height: 115,
					border:'none'

				},
				show:false
			};
		},
		methods: {
			del(e) {
			   this.$emit('del',e.index);
			},

			select(e) {
				console.log(e,'e')
				 this.show=true;
				if (e.tempFilePaths.length > 0) {
                   e.tempFilePaths.map(item => {
                       this.upload(item)
                })
            }

			},
		
			// 上传失败
			fail(e) {
				console.log('上传失败：', e)
			},
			upload(url) {
				
                  uni.uploadFile({
						url: this.$API_URL + '/app3/upload/uploadOne', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						success: (res) => {
							console.log(res.data)
							res=JSON.parse(res.data)
							if(res.code==200){
								this.show=false;
                             this.$emit('success',{url:res.data});
							}else{
								this.$u.toast(res.msg);
							}
							
						}
					});
				
			},
		},
	};
</script>

<style scoped lang="css">
	.grid {
		margin-right: 10rpx;

		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 36rpx;
		column-gap: 24rpx;
	}
</style>
